﻿
<div class="container">
    <form name="personForm" class="ng-cloak">
        
        <div class="row-fluid">
        
            <div class="span6">
            
                <fieldset>
      
                    <legend>Person Details</legend>
        
                    <div class="control-group">
                        <label class="control-label" for="title">Title</label>
                        <div class="controls">
                            <input type="text" name="title" data-ng-model="person.title" class="span6" />
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="firstName">First Name</label>
                        <div class="controls">
                            <input type="text" name="firstName" data-ng-model="person.firstName" class="span12" />
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="middleName">Middle Name</label>
                        <div class="controls">
                            <input type="text" name="middleName" data-ng-model="person.middleName" class="span10" />
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="lastName">Last Name</label>
                        <div class="controls">
                            <input type="text" name="lastName" data-ng-model="person.lastName" class="span12" />
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label" for="suffix">Suffix</label>
                        <div class="controls">
                            <input type="text" name="suffix" data-ng-model="person.suffix" class="span6" />
                        </div>
                    </div>

                </fieldset>

            </div>
        
            <div class="span6">
            
                <fieldset>
      
                    <legend>Contact Information</legend>
                    
                    <div class="control-group">
                        <div class="control-group btn-group">
                            <button class="btn" ng-class="{'btn-primary': panelId === 'list'}" ng-click="panelId = 'list'">List</button>
                            <button class="btn" ng-class="{'btn-primary': panelId === 'postal'}" ng-click="panelId = 'postal'">Postal</button>
                            <button class="btn" ng-class="{'btn-primary': panelId === 'phone'}" ng-click="panelId = 'phone'">Phone</button>
                            <button class="btn" ng-class="{'btn-primary': panelId === 'email'}" ng-click="panelId = 'email'">Email</button>
                        </div>
                    </div>
                    
                    <ng-include src="contactInfoPanelUrl">
                    </ng-include>
                    
                </fieldset>
            </div>
        </div>
            
        <div class="row-fluid">
            <div class="control-group">
                <div class="controls row-fluid">
                    <div class="span12">
                        <button class="btn" data-ng-click="save()"><i class="icon-remove-sign"></i> Save</button>
                        <button class="btn" data-ng-click="returnToList()"><i class="icon-remove-sign"></i> Return to List</button>
                    </div>
                </div>
                <div class="row-fluid" data-ng-show="errorMessage">
                    <div class="span12 text-error">
                        {{errorMessage}}
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>
